<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>NexHome Admin</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- bootstrap -->
    <link href="css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
    

    <!-- libraries -->
   <link href="css/lib/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/lib/font-awesome.css" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/elements.css" />
    <link rel="stylesheet" type="text/css" href="css/icons.css" />
	
	<link rel="stylesheet" href="css/cfgmgr/bootstrap-table.css">    
 <!-- this page specific styles -->
    <link rel="stylesheet" href="css/compiled/index.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/cfgmgr/clean.css" type="text/css" media="screen" /> 
   
   <!-- open sans font -->
    <link href='css/OpenSans.css' rel='stylesheet' type='text/css' />

    <!-- lato font -->
    <link href='css/Lato.css' rel='stylesheet' type='text/css' />
	
<!--[if lt IE 9]>
      <script src="js/html5.js"></script>
    <![endif]--> 
	
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
<style>
	a{cursor:pointer;	
text-decoration: none;
}
	.icon-add {
width: 20px;
height: 20px;
background: url(images/icon_add.png) no-repeat;
font-size: 12px;
}
input.input-small {
width: 90%;
margin-top: 10px;
margin-right: 5px;
}
.Boardtab {
margin-bottom: 0 !important;
border: 1px solid #dddddd;
border-collapse: collapse !important;
border-radius: 1px;
}
.Boardtab tr{

border: 1px solid #dddddd;
border-collapse: collapse !important;
border-radius: 1px;
}
.Boardtab thead th {
padding: 8px;
line-height: 24px;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-error {
color: #ff7d73;
font: 14px/20px "宋体",Arial, Helvetica, sans-serif;
}

input.error, textarea.error, select.error {
border-color: #ff7d73;
-webkit-box-shadow: 2px 2px 5px rgba(255,125,115,0.5),-2px -2px 5px rgba(255,125,115,0.5);
-moz-box-shadow: 1px 1px 1px rgba(255,125,115,0.5),-1px -1px 1px rgba(255,125,115,0.5);
box-shadow: 2px 2px 5px rgba(255,125,115,0.5),-2px -2px 5px rgba(255,125,115,0.5);
}
.modalTrigger.fade.in {
  top: 20%;
}
.modalSence.fade.in {
  top: 45%;
}
.modalAlarm.fade.in {
  top: 60%;
}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootbox.min.js"></script>

<script src="js/modelmgr/xml2json/ObjTree.js"></script>
<script src="js/modelmgr/xml2json/jkl-dumper.js"></script>


<script src="js/modelmgr/map.js"></script> 
<script src="js/modelmgr/TablesOpretor.js"></script>

<script src="js/table/bootstrap-table.js"></script>
<script src="js/table/bootstrap-table-zh-CN.js"></script>
<script src="js/bootbox.min.js"></script>

<script src="js/modelmgr/InitObjData.js"></script>
<script src="js/modelmgr/LoadData.js"></script>
<script src="js/modelmgr/FormatToJsonData.js"></script>
<script src="js/modelmgr/DevModelMgr.js"></script>

<script>
$(function () {
	$('#addr1Check').click(function(){
		//e.preventDefault();
		if(!document.getElementById('addr1Check').checked){
			$('#addr1Name').hide();
		}
		else{
			$('#addr1Name').show();
		}
	});
	$('#addr2Check').click(function(){
		//e.preventDefault();
		if(!document.getElementById('addr2Check').checked){
			$('#addr2Name').hide();
		}
		else{
			$('#addr2Name').show();
		}
	});
	
});

//增加行
function addTableRow(gridId) {
	$.fn.tables.addRow(gridId);
}

</script>
  </head>
  <body> 
  <!--<![endif]-->
<!-- main container -->
    <div class="content">       
        <div class="container-fluid">
         <div id="pad-wrapper"  style="margin-top:15px;" class="users-list">
		 
			<div >
				<div class="alert alert-info hidden-tablet">
				<i  style="top:0;" class="icon-lightbulb pull-left"></i>
				该配置页面的所有配置内容需要您在配置完成后点击下方的“保存配置”按钮方可生效！请勿在未保存的情况下离开该页面。
				</div>
			</div>
			
			<div class="row-fluid header">
				<h3>设备模板管理&nbsp;&nbsp;&nbsp;</h3><h4  style="margin-left:0; margin-top:3px;" id="currRouterid"></h4>
				<a    id="savemodelbtn"   onclick="SaveModelAction()"  class="btn btn-danger pull-right">保存配置</a>
				<!--<div class="span10 pull-right" id="div_find">
					<input type="text" class="span5 search" id="Dtext" placeholder="Type a user's name..." />                   				                    <div class="ui-dropdown">
						<div class="head" data-toggle="tooltip" title="Click me!" id="search_btn">
							设备筛选                                
						</div>                                
					</div>												
				</div>--> 						
			 </div>

		<div id="cfgShow">
			<div class="row-fluid chart" id="router">
								<div class="row-fluid head">
									<div class="span12">							
										<h4 style="margin-left:10px;">选择设备类型 <small><select  onchange="selectetypechange()"  id="SelectElemType">	</select></small>&nbsp;&nbsp;</h4>
									</div>
								</div>
								<div id='value'>                          
								 </div>
			</div>
			<div class="table-wrapper table-products section">
				<h4 style="margin-left:10px;margin-bottom:15px;">厂家型号列表&nbsp;&nbsp;&nbsp;&nbsp;
					<select onchange="selectFacModChange()" id="SelectFacModel">
					</select>&nbsp;&nbsp;
					<!--<button class="btn-flat"  onclick="ShowAddFacModel()"  id="ModlebtnAdd">-->
						<!--<i class="icon-plus"></i>添加-->
					<!--</button>&nbsp;&nbsp;-->
					<!--<button  class='btn-flat danger'  id='FacModelDel' onClick="ShowFacModelDelModel()">-->
						<!--<i class='icon-remove'></i>删除-->
					<!--</button>-->
				</h4>
			</div>

			<div id ="devListDiv" class="table-wrapper table-products section">

			</div>
		</div>
	
      </div>
  </div>
</div>   

<div class="modal small hide fade" id="FacModelDelModal" tabindex="-1" role="dialog" aria-labelledby="areaDelModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 >删除模板信息</h3>
				</div>
				<div class="modal-body">
					<div class="form-group" align="center">
         			<form id="areaAddModalform">
					<h4 style="float:left;margin-bottom:10px; color:#C22CA3;"><i class="icon-warning-sign modal-icon"></i>删除厂家型号的同时，该型号下所有模板消息均被删除！请谨慎！</h4><br>
					<table>
						<tr><td>选择要删除的厂家型号:</td><td > <select id="FacModelDelselect"  name="FacModelDelselect" class="input-xlarge"></select></td></tr>
						
					</table>													
					</form>
         			</div>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
					<button class="btn btn-danger" onClick="FacModelDelAction()" id="FacModelDelModal_delbtn">删除</button>
				</div>
</div> 
<div class="modal small hide fade" id="epAddModal" tabindex="-1" role="dialog" aria-labelledby="epAddModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="epAddModalLabelTitle">添加设备信息</h3>
				</div>
				<div class="modal-body">
					<div class="form-group form-item addepdiv" align="center">
         			<form id="epAddModalform"  name="epAddModalform" >
					<table id="epAddModaltable">
						<tr style="display:none"><td>楼层</td><td><input type="text" name='floorname' id="floorname"   class="input-xlarge" ></td></tr>
						<tr style="display:none"><td>楼层名称</td><td><input type="text" name='floorid' id="floorid"   class="input-xlarge" ></td></tr>
						<tr style="display:none"><td>区域</td><td><input type="text" name='atypename' id="atypename"  class="input-xlarge" ></td></tr>						
						<tr style="display:none"><td>区域名称</td><td><input type="text" name='atype' id="atype"  class="input-xlarge" ></td></tr>
						<tr style="display:none"><td>epid</td><td><input  type="text" name='epid' id="epid"   class="input-xlarge"></td></tr>
						
								
						
							
						<tr ><td>协议类型</td><td><select name='conf' id="conf"  onChange="confChange()"  class="input-xlarge" validate="required" >
                        <option value="01">协议型</option>
                        <option value="02">配置型</option>
                        </select></td></tr>
                        <tr  id="modelcodeTr" ><td>厂家编号</td><td><input type="text" name='modelcode' value="";  id="modelcode" class="input-xlarge" validate="isHex|Lengthequal[2]"></td></tr>
					    <tr id="protocolTr" ><td>协议编号</td><td><input type="text" name='protocol' value=""; id="protocol" class="input-xlarge" validate="isHex|Lengthequal[2]"></td></tr>
					     <tr  id="facnameTr" ><td>厂家名称</td><td><input type="text" name='facname' value="";  id="facname" class="input-xlarge " validate="required"></td></tr>
                         
                         <tr  id="addr1NameTr" ><td><input id="addr1Check"  type="checkbox" checked="checked"> 额外地址1</td><td><input type="text" name='addr1Name' value="";  id="addr1Name" class="input-xlarge" validate=""></td></tr>
                         <tr  id="addr2NameTr" ><td><input id="addr2Check"  type="checkbox" checked="checked"> 额外地址2</td><td><input type="text" name='addr2Name' value="";  id="addr2Name" class="input-xlarge" validate=""></td></tr>
					
					</table>					
					</form>
         			</div>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
					<button class="btn btn-danger"  onclick="AddFacModalAction()"  id="AddFacModal_addbtn">添加</button>
				</div>
</div>

<div class="modal small hide fade" id="epEditModal" tabindex="-1" role="dialog" aria-labelledby="epAddModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="epEditModalLabelTitle">编辑设备信息</h3>
				</div>
				<div class="modal-body">
					<div class="form-group form-item addepdiv" align="center">
         			<form id="epEditModalform"  name="epEditModalform" >
					<table id="epEditModaltable">
					<tr  id="facnameTr" ><td>厂家名称</td><td><input type="text" name='facnameEdit' value="";  id="facnameEdit" class="input-xlarge " validate="required"></td></tr>
					</table>					
					</form>
         			</div>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
					<button class="btn btn-danger"  onclick="EditFacModalAction()"  id="AddFacModal_addbtn">确定</button>
				</div>
</div>
 
<div   class="modal small hide fade" id="CMDAddModal" tabindex="-1" role="dialog" aria-labelledby="CMDAddModal" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="CMDAddModalLabel">命令管理</h3>
				</div>
				<div class="modal-body">
					<div class="form-group smallform-item" align="center">
         			<form id="CMDAddModalform"  name="CMDAddModalform">
					<table class="Boardtab bootstrap-table table table-hover table-striped" >
					<thead>
					<tr>
					 <th>设备厂商型号</th>
					 <th><input type="text"  name='oemId' id="oemId" class="input-xlarge" readonly disabled="disabled"></th>
					 <th style="display:none"></th>
					 </tr>
                     <tr>
                     <th>模板名称</th>
					 <th><input type="text"  name='modelname' id="modelname" class="input-xlarge"  ></th>
					 <th style="display:none"></th>
					 </tr>
                     
					 <tr>
					 <th>选择命令类型</th>
					 <th><select name='cmdctype' onchange="cmdctypechange()" id="cmdctype" class="input-xlarge"></select></th>
					 <th style="display:none"><input type="text"  name='cmdepid' id="cmdepid"  style="display:none"></th>
					 </tr>
					
					 
					
					 <tr id="cmddtypeTR" style="display:none">
					 <th>选择设备型号</th>
					 <th><select name='cmddtype' id="cmddtype" class="input-xlarge"></select></th>
					 <th style="display:none"></th>
					 </tr>
					 <tr>
					 <th>选择命令支持的读写操作</th>
					 <th>
					 <select name='cmdrw' id="cmdrw" class="input-xlarge">
					 	<option value="0">read</option>
						<option value="1">write</option>
						<option value="2">read/write</option>
					 </select></th>
					 <th style="display:none"></th>
					 </tr>		
		 			
					 </thead>
					</table>
										
					
					<br>
					<h4 style="float:left;margin-bottom:10px; color:#C22CA3;">模板命令</h4>
									
					<table id="MCMDtable" class="Boardtab bootstrap-table table table-hover table-striped">
						<thead>
                        <tr>
                            <th>命令名称</th>
							<th>按键ID</th>
                            <th>命令ID</th>
                            <th>数据类型</th>
                            <th>命令值</th>
							 <th>删除</th>                        
                        </tr>
                    	</thead>						
						<tbody >
                        <tr id="FirstTr">					
							<td><input type="text"  class="input-small" validate="required|max_length[24]" name='name' id="name" ></td>
							<td><input type="text" class="input-small" validate="required|integer" name='id' id="id"></td>
							<td><input type="text" class="input-small" validate="required|integer" name='oid' id="oid"></td>
							<td><input type="text" class="input-small" validate="required|integer" name='dtype' id="dtype" ></td>
							<td><input type="text" class="input-small" validate="required|max_length[128]" name='val' id="val" ></td>
							<td>
                                <a  title="删除"  name="Id" onClick="deleteRow(this)"><i class="icon-remove"></i></a>
                            </td>
						</tr>
						</tbody>																								
					</table>
					
					<br>
					<h4 style="float:left;margin-bottom:10px; color:#C22CA3;" >自定义命令</h4>
					
					<table id="CMDAddtable" class="Boardtab bootstrap-table table table-hover table-striped">
						<thead>
                        <tr>
                             <th>命令名称</th>
							<th>按键ID</th>
                            <th>命令ID</th>
                            <th>数据类型</th>
                            <th>命令值</th>                            
                            <th><a onClick="javascript:addTableRow('CMDAddtable')" title="新增"><i class="icon-plus-sign"></i></a></th>
                        </tr>
                    	</thead>						
						<tbody >
                        <tr id="FirstTr">					
							<td><input type="text"  class="input-small" validate="required|max_length[24]" name='name' id="name" ></td>
							<td><input type="text" class="input-small" validate="required|integer" name='id' id="id"></td>
							<td><input type="text" class="input-small" validate="required|integer" name='oid' id="oid"></td>
							<td><input type="text" class="input-small" validate="required|integer" name='dtype' id="dtype" ></td>
							<td><input type="text" class="input-small" validate="required|max_length[128]" name='val' id="val" ></td>
							<td>
                                <a  title="删除"  name="Id" onClick="deleteRow(this)"><i class="icon-remove"></i></a>
                            </td>
						</tr>
						</tbody>																								
					</table>
					
									
					</form>
         			</div>
					
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
					<button class="btn btn-danger" onclick="CMDAddModalSaveAction()" id="CMDAddModal_addbtn">确定</button>
				</div>
</div>
 
<div class="modal small hide fade" id="DeleteAllModal" tabindex="-1" role="dialog" aria-labelledby="DeleteAllModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="DeleteAllModalLabel">删除信息</h3>
				</div>
				<div class="modal-body">
					<p class="error-text"><i class="icon-warning-sign modal-icon"></i>将删除全部已选项，是否确认删除？</p>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
					<button class="btn btn-danger" data-dismiss="modal" id="DeleteAllModal_delbtn">删除</button>
				</div>
</div>       

<div class="modal small hide fade" id="DeleteModalCmd" tabindex="-1" role="dialog" aria-labelledby="DeleteModalCmdLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="DeleteModalLabel">删除信息</h3>
				</div>
				<div class="modal-body">
					<p class="error-text"><i class="icon-warning-sign modal-icon"></i>&nbsp确认删除&nbsp<font color="red" id="delCmdName"></font>&nbsp模板命令？</p>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
					<button class="btn btn-danger" data-dismiss="modal" id="DeleteModalCmdAction">删除</button>
				</div>
</div>  

<div   class="modal small hide fade" id="CMDAddModal" tabindex="-1" role="dialog" aria-labelledby="CMDAddModal" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="CMDAddModalLabel">命令管理</h3>
				</div>
				<div class="modal-body">
					<div class="form-group smallform-item" align="center">
         			<form id="CMDAddModalform"  name="CMDAddModalform">
					<table class="Boardtab bootstrap-table table table-hover table-striped" >
					<thead>
					<tr>
					 <th>设备厂商型号</th>
					 <th><input type="text"  name='oemId' id="oemId" class="input-xlarge" readonly disabled="disabled"></th>
					 <th style="display:none"></th>
					 </tr>
					 <tr>
					 <th>选择命令类型</th>
  </body>
</html>


